<template>
	<view class="content">
		<view class="searchBox">
			<uni-search-bar class="uni-mt-10" v-model="commodityName" radius="100" placeholder="请输入想要搜索的商品"
				clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<view class="cateBox">
			<!-- 左侧列表 -->
			<scroll-view class="cate-left" scroll-y="true">
				<view class="cate-left-list" v-for="(item, index) in data" :key="index" @click="tapselect(index)">
					<view class="cate-left-item " :class="{ activeItem: currentTab == index }">
						<label></label><text>{{ item.navtitle }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 右侧列表 -->
			<scroll-view class="cate-right" scroll-y="true" @scrolltolower="loadMoreGoods">
				<view v-for="(item, index) in data" :key="index" v-if="currentTab === index">
					<view class="cate-right-title" v-if="item.shop">
						<image class="classBanner" :src="item.iconBig" mode=""></image>
						<text>{{ item.navtitle }}</text>
					</view>
					<view class="cate-right-list">
						<view class="cate-right-item" v-for="(child, childindex) in item.shop" :key="childindex"
							@click="itemClick(child)">
							<view class="goods-item">
								<image class="goods-image" :src="child.imageUrl" mode="aspectFill"></image>
								<view class="" style="width: 10rpx;height: 100%"></view>
								<view class="goods-info">
									<p class="title">{{ child.title }}</p>
									<p class="tags">{{child.attributeName}}:
										{{child.attributeValue}}<template
											v-if="child.specificationName && child.specificationValue">
											, {{ child.specificationName }}: {{ child.specificationValue }}
										</template>
									</p>
									<p class="price">{{ child.price }}
										<!-- <image class="shoppingCar" src="../../../../static/car.png" mode=""></image> -->
									</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getClassify,
		getGoods
	} from '@/api/goods.js';

	export default {
		data() {
			return {
				data: [],
				currentClassifyId: null,
				currentTab: 0,
				pageNumber: 1,
				hasMore: true,
				commodityName: ''
			};
		},
		mounted() {
			this.getClassList();
		},
		methods: {
			search(e) {
				this.commodityName = e.value || ''; // 更新搜索关键字
				if (this.currentClassifyId !== null) {
					this.data.forEach(item => this.$set(item, 'shop', [])); // 清空所有分类的商品列表
					this.pageNumber = 1; // 重置页码
					this.hasMore = true; // 假设还有更多数据可加载
					this.getGoodsList(this.currentClassifyId); // 使用新的搜索条件重新获取商品列表
				}
			},
			getClassList() {
				const params = {
					pageSize: 99,
					pageNumber: 1,
				};
				getClassify(params).then(res => {
					if (res.data.records && res.data.records.length) {
						this.data = res.data.records.map(item => ({
							id: item.id,
							navtitle: item.systematicName || '未知分类',
							iconBig: item.iconBig,
							shop: []
						}));
						if (this.data.length > 0) {
							this.currentClassifyId = this.data[0].id;
							this.getGoodsList(this.currentClassifyId);
						}
					} else {
						console.error('未获取到分类信息');
					}
				}).catch(err => {
					console.error('获取分类信息失败', err);
				});
			},
			getGoodsList(classifyId, append = false) {
				const params = {
					commodityName: this.commodityName,
					classifyId: classifyId,
					pageSize: 20,
					pageNumber: this.pageNumber,
				};
				getGoods(params).then(res => {
					if (res.data.records && res.data.records.length) {
						const index = this.data.findIndex(item => item.id === classifyId);
						if (index !== -1) {
							if (!append) {
								this.$set(this.data[index], 'shop', []);
								this.pageNumber = 1; // Reset page number for new category
							}
							this.$set(this.data[index], 'shop', [
								...this.data[index].shop,
								...res.data.records.map(good => ({
									id: good.id,
									imageUrl: good.pictureIntegrationDtoS[0].pictureUrl,
									title: good.commodityName,
									price: `¥${good.commoditySpecificationBasicInformationDto.commoditySpecificationAttributeInfoDto.sellingPrice}`,
									attributeName: good.commoditySpecificationBasicInformationDto
										.attributeName,
									attributeValue: good.commoditySpecificationBasicInformationDto
										.attributeValue,
									specificationName: good
										.commoditySpecificationBasicInformationDto
										.commoditySpecificationAttributeInfoDto.specificationName,
									specificationValue: good
										.commoditySpecificationBasicInformationDto
										.commoditySpecificationAttributeInfoDto.specificationValue,
								}))
							]);
							this.hasMore = res.data.hasNextPage;
							this.pageNumber++;
						}
					} else {
						console.log('该分类下没有商品');
					}
				}).catch(err => {
					console.error('获取商品列表失败', err);
				});
			},
			itemClick(item) {
				uni.navigateTo({
					url: '/pages/classification/goodsDetail/index?id=' + item.id
				})
			},
			tapselect(index) {
				this.currentTab = index;
				this.currentClassifyId = this.data[index].id;
				this.pageNumber = 1; // Reset page number when switching categories
				this.getGoodsList(this.currentClassifyId);
			},
			loadMoreGoods() {
				if (this.hasMore) {
					this.getGoodsList(this.currentClassifyId, true);
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss'; // 导入全局 SCSS 变量文件

	.content {
		background-color: $uni-bg-color-grey;
	}

	.searchBox {
		height: 100rpx;
		background-color: $uni-bg-color-white;
	}

	/* 子组件样式 */
	.cateBox {
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		display: flex;
	}

	.cate-left {
		width: 156rpx;
		background: #fff;
		height: 100%;
	}

	.cate-left-item {
		background: #fff;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.cate-left-item.activeItem {
		background: #fff;
	}

	.cate-left-item label {
		width: 8rpx;
		height: 30px;
		float: left;
		background: #f4f4f4;
	}

	.cate-left-item.activeItem label {
		background: #7AAD5B;
	}

	.cate-left-item text {
		width: 156rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	.cate-left-item.activeItem text {
		color: #7AAD5B;
		font-weight: bold;
	}

	.cate-right {
		flex: 1;
	}

	.cate-right-title {
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}

	.cate-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-right-title text {
		padding: 0 10px;
		position: relative;
		color: #000;
	}

	.cate-right-list {
		height: auto;
		overflow: hidden;
	}

	.cate-right-item {
		width: 100%;
		margin-top: 20rpx;
	}

	.classBanner {
		width: 96%;
		height: 200rpx;
	}

	.goods-item {
		display: flex;
		align-items: center;
		background-color: $uni-bg-color-white;
		margin: 20rpx 20rpx 20rpx 6rpx;
		padding: 10rpx;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
	}

	.goods-info {
		flex: 1;
	}

	.title {
		height: 80rpx;
		font-size: $uni-font-size-base;
		font-weight: bold;
		color: $uni-text-color;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tags {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-top: 5rpx;

	}

	.price {
		font-size: 28rpx;
		font-weight: bold;
		color: #e4393c;
	}

	.shoppingCar {
		width: 40rpx;
		height: 40rpx;
		float: right;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}

	.cate-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
	}
</style>